.code-demo-tab {
    width: 100%; height: 35px; margin: 0 auto
}
.code-demo-tab .codetabul {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    background: #F5F5F5;
    border: 1px solid #e7e7e7;
}
.code-demo-tab .codetabul li {
    float: left;
    height: 33px;
    line-height: 35px;
    padding: 0px 5px 0px 5px;
    margin-left: 5px;
    color: #666666;
    cursor: pointer;
}

.code-demo-tab .codetabul li:hover {
    color: #00BDFF;
    border-bottom: 2px solid #00BDFF;
}

.code-demo-tab .codetabul .active {
    color: #00BDFF;
    width: auto;
    border-bottom: 2px solid #00BDFF;
    position: relative
}
.code-demo-main {
    width: 100%; margin: 0 auto;
}
.code-demo-main .code-demo-show {
    width: 684px;
    border: 1px solid #e7e7e7;
    color: #666;
    white-space: pre;
    line-height: 20px;
    max-height: 400px;
    background: #fcfcfc;
    overflow: auto;
}
.code-demo-main .code-demo-show pre code{
    padding-left: 10px;
}